<template>
  <div>
    <div class="table-data" v-show="tabShow">
      <div class="search-box">
        <el-input size="small" v-model="search" placeholder="标签名称"></el-input>
        <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button size="small" @click="handleAdd()" type="primary"><i class="el-icon-plus"></i><span>新建标签</span></el-button>
      </div>
      <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData" :header-cell-style="headClass" style="width:100%" :height="tHeight" class="table-box">
        <el-table-column label="id" width="100" prop="id"></el-table-column>
        <el-table-column label="标签名称"  prop="tag"></el-table-column>
        <el-table-column label="包含商品数量" prop="goods_count"></el-table-column>
        <el-table-column label="备注" prop="desc"></el-table-column>
        <el-table-column label="创建时间" prop="createtime"></el-table-column>
        <el-table-column label="操作" width="240">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.$index,scope.row)" size="mini" type="primary">编辑</el-button>
            <el-button @click="handleDelete(scope.$index,scope.row)" size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages" ref="page-box">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
      </div>
    </div>
    <router-view @loadData="loadData" :tabShow="tabShow"></router-view>
    <EditDialog :isEdit="isEdit" :isAdd="isAdd" :key="timer" :form="formData" @closeDialog="closeDialog" @loadData="loadData"></EditDialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
import goodsApi from "@/api/goods";
import EditDialog from "./EditDialog.vue";
// import { State, Getter, Mutation, Action } from "vuex-class";
@Component({
  components: { EditDialog}
})
export default class labelList extends Vue {
  // @Getter("user") getUser: any;
  search:string ="";//搜索
  @Provide() state: string = "1"; // 状态默认值
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() isAdd: Boolean = false; // 是否展示添加弹窗
  @Provide() isEdit: Boolean = false; // 是否展示编辑弹窗
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Prop({}) tabVisible!: any;
  @Provide() timer: any = '';
  @Watch("$route") handleRouteChange(to: any,form:any) {
    if(form.path!='/labelList'){
      this.tabShow=this.tabVisible;
    }
  }
  @Provide() formData:any={
    id:"",
    avatar: "",
    order:"",
    tag:"",
    desc:"",
  }
  headClass() {
    return "text-align: center;background:#eef1f6;";
  }
  // 新增
  handleAdd(){
    // this.tabShow=false
    // this.$router.push({
    //   path:'/labelList/add'
    // })
    this.isAdd=true;
    this.isEdit=true;
    this.timer = new Date().getTime();
    this.formData={id:"",avatar: "",order:"",tag:"",desc:""}
  }
  // 编辑
  handleEdit(index: number, row: any){
    this.formData=row
    this.isEdit=true;
    this.timer = new Date().getTime();
    // this.tabShow=false
  }
  // 删除
  handleDelete(index: number, row: any) {

    this.$confirm('【' + row.tag+'】该标签是否删除？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      closeOnClickModal:false
    }).then(() => {
      let data = {
        id:row.id,
        status: 0
      }
      goodsApi.deleteatap(data)
              .then((res:any)=>{
                if(res.data.code==200){
                  this.$message({
                    message: '操作成功',
                    type: "success"
                  });
                  this.loading=true
                  this.loadData();
                }else{
                  this.$message({
                    message: res.data.msg,
                    type: "error"
                  });
                }
              })
    });
  }
  // 关闭弹窗
  closeDialog() {
    this.isAdd = false;
    this.isEdit = false;
    this.loadData()
  }
  created() {
    this.loadData();
    if(this.$route.path!='/labelList'){
      this.tabShow=false
    }
  }

  loadData() {
    goodsApi.labelList(this.page,this.size, this.search)
      .then((res: any) => {
        this.tableData = res.data.data.data;
        this.total = res.data.data.total;
        this.loading=false
      });
  }

  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }

  handleSearch(): void {
    // 点击搜索
  this.page = 1;
  this.loadData();
  }
}
</script>

<style lang="scss" scoped>
.el-date-editor{
  margin-right: 10px;
}
</style>
